<template>
  <div>
    <!-- 切换按钮 -->
    <h1>房态图</h1>
    <el-form :inline="true" style="width: 90%" :model="selectForm" class="demo-form-inline">
      <el-form-item>
        <el-button :type="type" @click="fensan()">分散式</el-button>
        <el-button :type="types" @click="jizhong()">集中式</el-button>
      </el-form-item>
      <br>
      <el-form-item>
        <el-cascader  :options="options" :props="props" clearable placeholder="省/市/县" @change="handleChange" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="selectForm.preName" placeholder="搜索：小区名,公寓名,房间号,租客名" style="width: 600px" />
      </el-form-item>
      <el-form-item>
        <el-button type="warning" icon="el-icon-search" @click="onsubmit()">搜索</el-button>
        <el-button type="primary" @click="resetForm()">清空</el-button>
      </el-form-item>
    </el-form>
    <div style="width:95%;" class="demo-form-inline">
      <el-button round @click="fastSearch(0)">全部</el-button>
      <el-button round @click="fastSearch(4)">租房分期</el-button>
      <el-button round @click="fastSearch(3)">租约保理</el-button>
      <el-button round @click="fastSearch(1)">空置可租</el-button>
      <el-button round @click="fastSearch(6)">欠费提醒</el-button>
      <el-button round @click="fastSearch(5)">收费提醒</el-button>
      <el-button round @click="fastSearch(7)">合同快到期</el-button>
      <el-button round @click="fastSearch(8)">合同已到期</el-button>
      <el-button round @click="fastSearch(2)">装修维护</el-button>
    </div>

    <!-- 展示房源  开始-->
    <div v-if="hostTypes == 1" v-for="roomFS in tableData" :key="roomFS.preId" style="width:95%;box-shadow: 0px 0px 20px #cccc inset;" class="demo-form-inline">
      <div class="topContent" style="border: none;">
        <h4>{{ roomFS.preName }}&nbsp;&nbsp;<span style="position: relative;left: -30px;font-size: 12px" class="span">({{ roomFS.bdiNo }})</span>
          <span class="span">{{ roomFS.leaseType==0?'整租':'合租' }}</span>
          <span class="span">{{ roomFS.publishStatus==0?'未发布':'已发布' }}</span>
          <span class="span">房间数：{{ roomFS.roomCount }}套</span>
          <el-button icon="el-icon-edit-outline" type="warning" class="an1">修改</el-button>
          <el-button icon="el-icon-edit-outline" type="warning" class="an1">发布</el-button>
          <el-button icon="el-icon-delete" type="warning" class="an1">删除</el-button>
        </h4>
        <hr>
      </div>
      <!--      内容-->
      <div class="nr">
        <div v-for="roomMini in roomFS.roomMni" :key="roomMini.roomId" class="fk">
          <h3 style="text-align: center">{{ roomMini.roomCode }}</h3>
          <p v-if="roomFS.tenantName!=null&&roomFS.tenantName!=''" class="name">
            {{ roomFS.tenantName }}
          </p>
          <span v-for="detail in roomMini.miniDetail">
            <p v-if="roomFS.tenantName==null">
              <a class="kz">空置{{ detail.total }}天</a>
            </p>
          </span>
          <br>
          <div v-if="roomFS.tenantName!=null" class="db" style="background: #FCE38A;margin-top: 22px">
<!--            <img src="../../img/leased.png" height="14" width="14" style="margin-left: 20px">-->
            <b style="float: right">{{ roomMini.rental }}元/月</b>
          </div>
          <div v-if="roomFS.tenantName==null" class="db" style="margin-top: 22px">
<!--            <img src="../../img/vacancy.png" height="14" width="14" style="margin-left: 20px">-->
            <b style="float: right">{{ roomMini.rental }}元/月</b>
          </div>
        </div>
      </div>
      <br>
    </div>

    <div v-for="roomJz in tbRoomInfoJzGy" style="width:95%;box-shadow: 0px 0px 20px #cccc inset;" class="demo-form-inline" v-if="hostTypes == 2">
      <!--  集中式    -->

      <div class="topContent" style="border: none;">
        <h4>{{ roomJz.flatName }}&nbsp;&nbsp;<span v-if="roomJz.preName!=null && roomJz.preName!=''" style="position: relative;left: -30px;font-size: 12px" class="span">({{ roomJz.preName }})</span>
          <span class="span">集中公寓</span>
          <el-button icon="el-icon-edit-outline" type="warning" class="an1" @click="toUpdateHouse(roomJz)">修改</el-button>
          <el-button icon="el-icon-edit-outline" type="warning" class="an1" @click="chanceStatus(roomJz,0)">{{ roomJz.publishStatus==0?'发布':'取消发布'}}</el-button>
          <el-button icon="el-icon-delete" type="warning" class="an1" @click="chanceStatus(roomJz,1)">删除</el-button>
        </h4>
        <hr>
      </div>
      <div v-for="ldDetail in roomJz.ldDetail">
        <div class="Content" style="border: none;"><el-button type="warning">{{ldDetail.buildingName}}栋</el-button>&nbsp;&nbsp;数据统计：空置<font color="#ffba00">{{ldDetail.vacancyNum}}</font>间，共<font color="#ffba00">{{ldDetail.total}}</font>间</div><hr style="margin-left: 40px">
        <div class="nr" v-for="miniDetail in ldDetail.miniDetail">
          <div class="fk" v-for="miniData in miniDetail.miniDetail">
            <h3 style="text-align: center">{{ miniData.roomCode }}</h3>
            <p v-if="miniData.tenantName!=null&&miniData.tenantName!=''" class="name">
              {{ miniData.tenantName }}
            </p>
            <span v-for="detail in miniData.miniDetail">
              <p v-if="miniData.tenantName==null && detail.total!=null">
                <a class="kz" v-if="miniData.roomroomStatus==0">空置{{ detail.total }}天</a>
                <a class="zx" v-else>装修{{ detail.total }}天</a>
              </p>
            </span>
            <br>
            <div style="margin-top: 10px">
              <div v-if="miniData.roomStatus==1" class="db2" style="background: #FCE38A;margin-top: 22px">
<!--                <img src="../../img/leased.png" height="14" width="14" style="margin-left: 20px">-->
                <b style="float: right">{{ miniData.rental }}元/月</b>
              </div>
              <div v-else-if="miniData.roomStatus==0"  class="db">
<!--                <img src="../../img/vacancy.png" height="14" width="14" style="margin-left: 20px">-->
                <b style="float: right">{{ miniData.rental }}元/月</b>
              </div>
              <div v-else-if="miniData.roomStatus==2" class="db3">
<!--                <img src="../../img/fix.png" height="14" width="14" style="margin-left: 20px">-->
                <b style="float: right">{{ miniData.rental }}元/月</b>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br>
    </div>

    <div v-show="total==0 || total==''">
<!--      <img src="../../img/img.png" height="500" width="500" style="margin-left: 200px">-->
    </div>
    <!--  分页  -->
    <div class="block">
      <el-pagination
        :current-page="pageNo"
        :page-sizes="[8, 16, 24]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>

  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "roomStatusMap",
  data() {
    return {
      tbRoomInfoJzGy:[],
      hostTypes: 1,
      type: 'warning',
      types: '',
      total: 10,
      pageSize: 6,
      pageNo: 1,
      tableData: [],
      selectForm: {},
      tree: [],
      options: [],
      props: {
        value: 'regionId',
        children: 'regions',
        label: 'regionName'
      }
    }
  },
  created() {
    this.treeData()
    this.initRoomList()
  },
  methods: {
    fastSearch(value) {
      this.selectForm.fangtaiType = value
      this.pageNo = 1
      this.initRoomList()
    },
    initRoomList() {
      axios.get('http://localhost:8200/houset/showRoom', {
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          hostType: this.hostTypes,
          preName: this.selectForm.preName,
          provinceSelected: this.tree[0],
          citySelected: this.tree[1],
          countrySelected: this.tree[2],
          fangtaiType:this.selectForm.fangtaiType
        }
      }).then((response) => {
        if (this.hostTypes==1){
          this.tableData = response.data.obj.responseFsVos.list;
        }
        this.tbRoomInfoJzGy=response.data.obj.TbRoomInfoJzGy;
        this.total = response.data.obj.responseFsVos.total;
        console.log()
      })
    },
    // 搜索
    onsubmit() {
      console.log(this.selectForm)
      this.pageNo=1
      this.initRoomList()
    },
    // 三级联动数
    treeData() {
      axios.get('http://localhost:8200/houset/regionlist').then((response) => {
        this.options = response.data.obj
      })
    },
    // 三级联动和改变
    handleChange(value) {
      // console.log(value);
      this.tree = value
    },
    // 分散式
    fensan() {
      this.selectForm = {}
      this.type = 'warning'
      this.types = ''
      this.hostTypes = 1
      this.onsubmit()
    },
    // 集中式
    jizhong() {
      this.selectForm = {}
      this.type = ''
      this.types = 'warning'
      this.hostTypes = 2
      this.onsubmit()
    },
    // 清空
    resetForm() {
      this.selectForm = {}
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.initRoomList()
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.initRoomList()
    }
  }
}
</script>

<style scoped>
.Content {
  padding-left: 30px;
  border: 1px solid #ccc;
  font-size: 15px;
  align-content: center;
}
.btn:hover{
  color: #FEC171;
  background: #ffba00;
}
.houseType{
  margin-top:30px;
  margin-left: 30px;
}
.form{
  display: block;
  margin-left: 30px;
  margin-top: 30px;
}
.demo-form-inline{
  margin: auto;
  margin-top: 20px;
}
.span {
  margin-left: 35px;
  font-weight: bold;
  font-size: 14px;
}
.an{
  padding: 4px 20px;
  margin-right: 10px;
  font-size: 12px;
}
.topContent {
  padding-top: 20px;
  padding-left: 40px;
  padding-bottom: 30px;
  border: 1px solid #ccc;
  font-size: 25px;
}

.an1{
  margin-left: 30px;
}
.nr{
  height: 90%;
  width: 100%;
  display: inline-block;
  box-shadow: 0px 5px 0px 0px #dcdc;
}

.kz{
  margin-left: 30px;
  border: 1px solid #31d05a;
  color: #31d05a;
  font-size: 15px;
  border-radius: 15%;
}
.zx{
  margin-left: 20px;
  border: 1px solid #656c67;
  color: #616662;
  font-size: 15px;
  border-radius: 15%;
}
.db{
  float: right;
  width: 100%;
  height: 25px;
  line-height: 35px;
  font-size: 12px;
  color: #989898;
  background: #d6f6de;
}
.name{
  margin-left: 45px;
  font-size: 13px;
}
.form{
  display: block;
  margin-left: 30px;
  margin-top: 30px;
}
.fk{
  float: left;
  border: 1px solid #bfcbd9;
  margin-left: 40px;
  margin-top: 10px;
  width: 117px;
  height: 156px;
}

</style>

